<template>
  <div>
    <el-row>
      <el-col :span="24" style="height: 70px">
        <div>
          <el-form :inline="true" :model="ruleForm" ref="ruleForm" label-width="80px" class="demo-form-inline">
            <el-form-item label="讲师名称" prop="lecturerUserName">
              <el-input v-model="ruleForm.lecturerName" placeholder="讲师名称"></el-input>
            </el-form-item>

            <el-form-item label="分润状态" prop="auditStatus">
              <el-select clearable v-model="ruleForm.auditStatus" placeholder="状态">
                <el-option label="确认中" value="0"></el-option>
                <el-option label="成功" value="1"></el-option>
                <el-option label="失败" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="lecturerUserId"
              label="序号"
              width="55"
            >
            </el-table-column>
            <el-table-column
              prop="lecturerUserName"
              label="讲师名称"

            >
            </el-table-column>
            <el-table-column
              prop="lecturerPhone"
              label="手机号">
              <template slot-scope="scope">
                <el-button @click="information(scope.$index, scope.row)" type="text">{{scope.row.lecturerPhone}}</el-button>
              </template>
            </el-table-column>

            <el-table-column
              prop="bankNum"
              label="银行卡号"

            >
            </el-table-column>
            <el-table-column
              prop="bankName"
              label="银行名称"

            >
            </el-table-column>
            <el-table-column
              prop="lecturerName"
              label="开户名"

            >
            </el-table-column>
            <el-table-column
              prop="lecturerProfit"
              label="教师收入"

            >
            </el-table-column>
            <el-table-column
              prop="platformProfit"
              label="平台收入"

            >
              <template slot-scope="scope">
                {{Math.floor(((scope.row.lecturerProfit/(scope.row.platformProfit/100))*((100-scope.row.platformProfit)/100))*100)/100}}
              </template>
            </el-table-column>
            <el-table-column
              prop="statusId"
              label="审核状态"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.auditStatus === '0'">
                  确认中
                </div>
                <div v-else-if="scope.row.auditStatus ==='1'">
                  成功
                </div>
                <div v-else>
                  失败
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="lecturerCreate"
              label="时间"
              width="200"
            >
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-dialog
            :title="informationTitle"
            :visible.sync="informationStu"
            width="60%" style="text-align: left"
          >
            <el-card class="box-card" style="text-align: center">
              <div slot="header">
                <span>讲师个人信息</span>
              </div>
              <el-form label-position="left" :model="informationTable" :inline="true" size="medium"
                       class="demo-form-inline">
                <el-form-item label="头像:">
                  <div style="width: 228px">
                    <el-image
                      style="width: 100px; height: 100px;position: absolute"
                      v-model="informationTable.head_image_url"
                      fit="fill"></el-image>
                  </div>
                </el-form-item>
                <el-form-item label="讲师编号:">
                  <div style="width: 200px">
                    {{informationTable.teacherNum}}
                  </div>
                </el-form-item>
                <el-form-item label="">
                  <div style="width: 200px"></div>
                </el-form-item>
                <el-form-item label="">
                  <div style="width: 268px"></div>
                </el-form-item>
                <el-form-item label="讲师名称:">
                  <div style="width: 200px">
                    {{informationTable.lecturerUserName}}
                  </div>
                </el-form-item>
                <el-form-item label="状态:">
                  <div style="width: 200px">
                    <div v-if="informationTable.auditStatus === 0">
                      未审核
                    </div>
                    <div v-else-if="informationTable.auditStatus === 1">
                      待审核
                    </div>
                    <div v-else>
                      审核通过
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="手机号:">
                  <div style="width: 210px">
                    {{informationTable.lecturerPhone}}
                  </div>
                </el-form-item>
                <el-form-item label="邮箱:">
                  <div style="width: 220px">
                    {{informationTable.lecturerEmail}}
                  </div>
                </el-form-item>
                <el-form-item label="职位:">
                  <div style="width: 220px">
                    {{informationTable.position}}
                  </div>
                </el-form-item>
                <el-form-item label="注册时间:">
                  <div style="width: 200px">
                    {{informationTable.lecturer_modified}}
                  </div>
                </el-form-item>
              </el-form>
            </el-card>
            <el-card class="box-card" style="text-align: center">
              <div slot="header" class="clearfix">
                <span>简介</span>
              </div>
              <div>
                {{informationTable.intro}}
              </div>
            </el-card>
            <el-card class="box-card" style="text-align: center">
              <div slot="header" class="clearfix">
                <span>分成情况</span>
              </div>
              <div>
                <el-form label-position="left" :model="informationTable" :inline="true" size="medium"
                         class="demo-form-inline">
                  <el-form-item label="讲师分成情况:">
                    <div style="width: 180px">
                      {{informationTable.lecturerRoportion}}%
                    </div>
                  </el-form-item>
                  <el-form-item label="累计总收入:">
                    <div style="width: 190px">
                      {{informationTable.lecturerCome}}元
                    </div>
                  </el-form-item>
                  <el-form-item label="">
                    <div style="width: 220px">
                    </div>
                  </el-form-item>
                  <el-form-item label="已提现金额:">
                    <div style="width: 190px">
                      0元
                    </div>
                  </el-form-item>
                  <el-form-item label="可提现金额:">
                    <div style="width: 190px">
                      0元
                    </div>
                  </el-form-item>

                  <el-form-item label="银行卡号:">
                    <div style="width: 200px">
                      {{informationTable.bankNum}}
                    </div>
                  </el-form-item>
                  <el-form-item label="银行名称:">
                    <div style="width: 200px">
                      {{informationTable.bankName}}
                    </div>
                  </el-form-item>
                  <el-form-item label="支行名称:">
                    <div style="width: 200px">
                      {{informationTable.bankBranch}}
                    </div>
                  </el-form-item>
                  <el-form-item label="开户姓名:">
                    <div style="width: 200px">
                      {{informationTable.lecturerUserName}}
                    </div>
                  </el-form-item>
                  <el-form-item label="身份证号:">
                    <div style="width: 200px">
                      {{informationTable.idCard}}
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
            <el-button style="float: right" @click="informationStu=false" type="danger" size="mini">取消</el-button>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div style="float: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="ruleForm.current"
            :page-sizes="[2, 4, 10, 20]"
            :page-size="ruleForm.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import qs from 'qs'

  export default {
    name: "sharebenefit",
    data() {
      return {
        informationTitle: '',
        informationTable: [],
        informationStu: false,
        ruleForm: {
          lecturerUserName: '',
          lecturerName:'',
          auditStatus: '',
          startDate: '',
          gmtCreate: '',
          current: 1,
          size: 10,
        },
        total: 1,
        tableData: []
      }
    },
    methods: {
      submitForm() {
          this.$axios.post("/student/stu/order-info/select", qs.stringify(this.ruleForm)).then(r => {
          console.log(r.data);
          //alert(JSON.stringify(r.data))
          this.tableData = r.data.records;
          this.total = r.data.total;
          this.ruleForm.current=r.data.current;
          this.ruleForm.size=r.data.size;
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      information(index, row) {
        this.informationStu = true;
        this.informationTitle = row.lecturerUserName + '---信息查看';
        console.log(index, row);
        this.informationTable = row;
      },
      handleSizeChange(val) {
       // console.log(`每页 ${val} 条`);
        // this.ruleForm.current=r.data.current;
        this.ruleForm.size=val;
        this.submitForm();
      },
      handleCurrentChange(val) {
       // console.log(`当前页: ${val}`);
        this.ruleForm.current=val;
        // this.ruleForm.size=r.data.size;
        this.submitForm();
      },

    },
    created(){
      this.submitForm();
    }
  }
</script>

<style>
  .el-form--inline .el-form-item {
    margin: 15px 0px;
  }

  .el-form--inline .el-form-item__label {
    font-weight: bold;
  }

  .el-form {
    text-align: left;
  }

  .el-form-item .el-form-item--medium {
    line-height: 50px;
    height: 50px;
  }
</style>
